<template>
    <div class="app-container">

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
            <el-col :span="6">
                <el-form-item label="客户名称:" prop="customerName">
                    <el-input maxlength="30" v-model="queryParams.customerName" clearable placeholder="请输入客户名称"></el-input>
                </el-form-item>
            </el-col>
        </SearchContent>

        <div class="card-wrap card-padding">
            <div class="table-title-wrap justify-end">
                <el-button type="primary" size="mini" @click="handleAdd"
                           v-hasPermi="['memberClue:buyerList:add']">新增
                </el-button>
            </div>

            <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" min-width="115" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <e-button size="mini" type="text" @click="handleUpdate(scope.row)"
                                      v-hasPermi="['memberClue:buyerList:edit']">编辑
                            </e-button>
                            <e-button size="mini" type="text" @click="handleDelete(scope.row)"
                                      v-hasPermi="['memberClue:buyerList:delete']">删除
                            </e-button>
                            <e-button size="mini" type="text" @click="handleDetail(scope.row)"
                                      v-hasPermi="['memberClue:buyerList:view']">查看
                            </e-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column show-overflow-tooltip label="业务范围" min-width="90" align="center" prop="businessScopeCode">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.business_scope"
                                :value="scope.row.businessScopeCode"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="客户编码" min-width="190" align="center" prop="customerCode">
                        <template v-slot="{row}">
                            {{ row.customerCode|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="客户名称" min-width="130" align="center" prop="customerName">
                        <template v-slot="{row}">
                            {{ row.customerName|filterNull }}
                        </template>
                    </el-table-column>

                    <el-table-column show-overflow-tooltip label="联系电话" min-width="130" align="center" prop="customerPhone">
                        <template v-slot="{row}">
                            {{ row.customerPhone|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="买受人名称" min-width="130" align="center" prop="vendeeGroupName">
                        <template v-slot="{row}">
                            {{ row.vendeeGroupName|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="操作人" min-width="130" align="center" prop="updateBy">
                        <template v-slot="{row}">
                            {{ row.updateBy|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="操作时间" min-width="150" align="center" prop="updateTime">
                        <template v-slot="{row}">
                            {{ row.updateTime|filterNull }}
                        </template>
                    </el-table-column>
                </template>
            </table-page>

        </div>

    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import {vendeeList, vendeeDelete} from "@/api/memberManage/memberList";

export default {
    name:"BuyerList",
    components: {
        SearchContent
    },
    dicts: ['business_scope'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                customerName:null
            },
            total: 0,
            dataList: [],
        };
    },
    created() {
        this.getList()
    },
    activated() {
        this.getList()
    },
    methods: {
        /** 查询测试单表列表 */
        getList() {
            this.loading = true;

            vendeeList(this.queryParams).then(res => {
                if (res.code == "200") {
                    const {rows, total} = res
                    this.dataList = rows
                    this.total = total
                    this.loading = false;
                }
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                customerName:null
            },
                // this.resetForm("queryForm");
            this.handleQuery();
        },

        /** 新增操作 */
        handleAdd() {
            this.$router.push({
                name: 'BuyerDetail',
                query: {type:'add', pageType:'新增买受人'}
            })
        },

        handleDetail(row) {
            this.$router.push({
                name: 'BuyerDetail',
                query: {
                    correlationVendeeId: row.correlationVendeeId,
                    type:'detail', pageType:'买受人详情'}
            })
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.$router.push({
                name: 'BuyerDetail',
                query: {correlationVendeeId: row.correlationVendeeId,
                    type:'edit', pageType:'编辑买受人'}
            })
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            console.log('row', row)
            this.$modal.confirm('确定删除？').then(() => {
                this.loading = true;
                return vendeeDelete(row.correlationVendeeId);
            }).then(() => {
                this.loading = false;
                this.handleQuery();
                this.$modal.msgSuccess("删除成功");
            }).finally(() => {
                this.loading = false;
            });

        },

    }
};
</script>


<style lang="scss" scoped>
.pagination-container {
    padding: 0 20px 50px !important;
}


.form-dialog {
    ::v-deep .el-dialog__header {
        padding: 10px 20px;
        border-bottom: 1px solid #DCDFE6;

        .el-dialog__headerbtn {
            top: 15px;
        }
    }

    .box-card {
        margin-bottom: 20px;

        .card-title {
            font-size: 16px;
            position: relative;
            margin-left: 8px;
            padding: 0;
        }

        .card-title::after {
            content: '';
            width: 4px;
            height: 18px;
            background-color: aqua;
            display: block;
            position: absolute;
            left: -12px;
            top: 2px;
        }
    }

}
</style>
